<template>
  <div class="box">
    <div class="header">
      <h1>新型冠状肺炎实时监测</h1>

      <div class="time">当前时间: {{ nowDate }}</div>
    </div>

    <div class="body">
      <div class="body-Left">
        <div class="body-one">
          <div class="dol dol-1"></div>
          <div class="dol dol-2"></div>
          <div class="dol dol-3"></div>
          <div class="dol dol-4"></div>
          <div ref="box1" style="width: 100%; height: 100%; "></div>
        </div>
        <div class="body-one">
          <div class="dol dol-1"></div>
          <div class="dol dol-2"></div>
          <div class="dol dol-3"></div>
          <div class="dol dol-4"></div>
          <div ref="box2" style="width: 100%; height: 100%; "></div>
        </div>
        <div class="body-one">
          <div class="dol dol-1"></div>
          <div class="dol dol-2"></div>
          <div class="dol dol-3"></div>
          <div class="dol dol-4"></div>
          <div ref="box3" style="width: 100%; height: 100%; "></div>
        </div>
      </div>
      <div class="body-Center">
        <div class="body-Center-one">
          <div class="box00"></div>
          <div class="box01"></div>
          <p class="zi">217021468&ensp;46987153&ensp;165524088&ensp;4510227</p>
        </div>
        <div class="body-Center-two">
          累计确诊 &emsp;&emsp;&emsp;&emsp; 现存确证 &emsp;&emsp;&emsp;&emsp; 累计治愈 &emsp;&emsp;&emsp;&emsp; 累计死亡
        </div>
        <button class="btn1">累计确诊</button>
        <button class="btn2">现存确诊</button>
        <div class="body-Center-three">
          <div class="mybox7" ref="box7" style="width: 100%; height: 100%; "></div>


          <img src="../../public/img/lbx.0dea0f97.png" alt="" class="img1">
          <img src="../../public/img/map.bab2b509.png" alt="" class="img">
          <img src="../../public/img/jt.c268bab5.png" alt="" class="img2">
        </div>
      </div>
      <div class="body-Right">
        <div class="body-one">
          <div class="dol dol-1"></div>
          <div class="dol dol-2"></div>
          <div class="dol dol-3"></div>
          <div class="dol dol-4"></div>
          <div ref="box4" style="width: 100%; height: 100%;"></div>
        </div>
        <div class="body-one">
          <div class="dol dol-1"></div>
          <div class="dol dol-2"></div>
          <div class="dol dol-3"></div>
          <div class="dol dol-4"></div>
          <div ref="box5" style="width: 100%; height: 100%; "></div>
        </div>
        <div class="body-one">
          <div class="dol dol-1"></div>
          <div class="dol dol-2"></div>
          <div class="dol dol-3"></div>
          <div class="dol dol-4"></div>
          <div ref="box6" style="width: 100%; height: 100%;"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="module">
// import * as echarts from "../../public/echarts.min.js";
import * as echarts from "echarts"
import { dataMap } from "../../public/dataMap.js"
import world from "../../public/world.js"
import { nameMap } from "../../public/nameMap.js"
// import "../../public/world.js"
// console.log(dataMap);
export default {
  name: "home",
  data() {
    return {
      nowDate: null,
      nowtimer: "",
      time: new Date(),
      mybox1: {
        title: {
          text: "新增确诊TOP10",
          textAlign: "center",
          left: "50%",
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: {
          type: "category",
          data: ["英国", "印度", "哥伦", "马来", "德国", "法国", "中国", "日本", "韩国", "泰国"],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#121c45"
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#192047"
            }
          },
          axisLabel: {
            color: "#757b90"
          }
        },
        series: [
          {
            type: "bar",
            data: [
              { name: "英国", value: 40000 },
              { name: "印度", value: 38000 },
              { name: "哥伦", value: 30000 },
              { name: "马来", value: 28000 },
              { name: "德国", value: 26000 },
              { name: "法国", value: 24000 },
              { name: "中国", value: 20000 },
              { name: "日本", value: 19000 },
              { name: "韩国", value: 17000 },
              { name: "泰国", value: 20000 },
            ],
            barWidth: "10",
            itemStyle: {
              borderRadius: 20,
              coor: "#2f89cf"
            },
          },
        ],
        grid: {
          top: "20%",
          left: "15%",
          right: "10%",
          bottom: "15%",
        },
      },
      mybox2: {
        title: {
          text: "大洲感染总人数趋势图",
          textAlign: "center",
          left: "50%",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: "category",
          data: ["02/14", "04/11", "06/06", "08/01", "09/26", "11/21"],
          boundaryGap: false,   //图形紧贴y轴
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: "#22a6f2"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {   //显示y紧贴
            show: true
          },
          axisLabel: {
            color: "#22a6f2"
          }
        },
        series: [
          {
            name: "亚洲",
            type: 'line',
            data: [0, 0, 0, 0, 0, 0],
          },
          {
            name: "北美洲",
            type: 'line',
            data: [29000000, 32000000, 36000000, 40000000, 8000000, 10000000],
          },
          {
            name: "大洋洲",
            type: 'line',
            data: [3000000, 1900000, 30000000, 40000000, 29000000, 2000000],
          },
          {
            name: "欧洲",
            type: 'line',
            data: [3000000, 3000000, 4000000, 5000000, 1000000, 2000000],
          },
          {
            name: "其他",
            type: 'line',
            data: [40000000, 19000000, 40000000, 50000000, 11230000, 3000000],
          }
        ],
        legend: {
          top: 25,
          textStyle: {
            color: '#22a6f2u'
          }
        },
        grid: {
          top: "40%",
          left: "20%",
          right: "10%",
          bottom: "15%",
        },
      },
      mybox3: {
        title: {
          text: "大洲感染总人数饼状图",
          textAlign: "center",
          left: "50%",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 95, name: '北美洲' },
              { value: 5, name: '欧洲' },

            ],
            legend: {}
          }
        ],
        color: ['#1089e7', '#f57474'],
        legend: {
          bottom: 0,
          left: 'center',
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            color: '#fff'
          }
        },

      },
      mybox4: {
        title: {
          text: "主要疫情国家治愈率",
          textAlign: "center",
          left: "50%",
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: {
          type: "value",
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        yAxis: [
          {
            type: "category",
            data: ["意大利", "英国", "哥伦比亚", "西班牙", "美国"],
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: "#fff"
            }
          },
          {
            type: "category",
            data: ["意大利", "英国", "哥伦比亚", "西班牙", "美国"],
            show: false
          },
        ],
        series: [
          {
            type: "bar",
            data: [
              { name: "意大利", value: 13.3 },
              { name: "英国", value: 10.4 },
              { name: "哥伦比亚", value: 92.6 },
              { name: "西班牙", value: 88.1 },
              { name: "美国", value: 77.7 },
            ],
            colorBy: ["#8e7afa", "#yellow", "#56d0e3", "#f57474", "#1089e8"],
            yAxisIndex: 0,    //系列属于类目轴
            barWidth: 15,     //柱子宽度
            itemStyle: {
              borderRadius: 20   //柱子圆角
            },
            label: {
              show: true,
              color: "#fff",
              formatter: function (params) {      // +%
                // console.log(params.value,'params.value');  
                return params.value + `%`
              }
            }
          },
          {
            type: "bar",
            data: [
              { name: "美国", value: 100 },
              { name: "西班牙", value: 100 },
              { name: "哥伦比亚", value: 100 },
              { name: "英国", value: 100 },
              { name: "意大利", value: 100 },
            ],
            yAxisIndex: 1,
            barWidth: 20,
            itemStyle: {
              color: "none",               //柱子没有填充色
              borderColor: "#00bad8",      //柱子的边框颜色
              borderWidth: 3,              //柱子边框宽度
              borderRadius: 20,            //柱子圆角
            },
          },
        ],
        grid: {
          top: "15%",
          left: "20%",
          right: "10%",
          bottom: "15%",
        },

      },
      mybox5: {
        title: {
          text: "世界每周新增治愈和死亡人数",
          textAlign: "center",
          left: "50%",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['6.09', '6.23', '7.07', '7.21', '8.04', '8.18', '09.0'],
          axisLabel: {
            color: "#c4e5e3"
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: "#c4e5e3"
          },
          //分割线
          splitLine: {
            lineStyle: {
              color: "#e7e7e7"
            }
          },
          //y轴线
          axisLine: {
            show: true,
            lineStyle: {
              color: "#e7e7e7"
            }
          },
        },
        series: [
          {
            type: 'line',
            name: "死亡人数",
            data: [100, 200, 300, 300, 400, 400, 100],
            areaStyle: {},
            symbol: 'none',
            smooth: true,
          },
          {
            type: 'line',
            name: "治愈人数",
            data: [33000000, 35500000, 36000000, 36500000, 37000000, 38000000, 41000000],
            areaStyle: {      //设置成面积图
              //渐变色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#09bd63',
                }, {
                  offset: 1, color: 'transparent'
                }],
                global: false   //缺省为false
              }
            },
            symbol: 'none',  //去掉线上的小点
            smooth: true,    //平滑
          }
        ],
        grid: {
          top: "40%",
          left: "20%",
          right: "10%",
          bottom: "15%",
        },
        legend: {
          top: "30",
          textStyle: {
            color: '#fff'
          }
        },
      },
      mybox6: {
        title: {
          text: '境外输入病情top10省份',
          left: 'center',
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            name: 'Area Mode',
            type: 'pie',
            radius: [5, 50],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            data: [
              { value: 100, name: '上海' },
              { value: 30, name: '广东' },
              { value: 28, name: '黑龙江' },
              { value: 26, name: '四川' },
              { value: 24, name: '陕西' },
              { value: 22, name: '内蒙古' },
              { value: 20, name: '福建' },
              { value: 18, name: '北京' },
              { value: 15, name: '天津' },
              { value: 10, name: '山西' },
            ]
          }
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
      },
      mybox7: {
        series: [
          {
            type: "map",           //系列的类型
            mapType: "world",      //地图类型
            data: dataMap,
            nameMap: nameMap,        //翻译国家名称（英文-->中文）
            //鼠标没有悬浮时的样子
            itemStyle: {
              areaColor: "#fffbe5"
            },
            //鼠标悬浮时的样子
            emphasis: {
              itemStyle: {
                areaColor: "#ff0000"    //区域颜色
              },
            },
          }
        ],
        //   视图映射
        visualMap: {
          type: "piecewise",   //切换效果
          itemWidth: 50,     //试图映射的宽度
          itemWidth: 20,     //试图映射的高度
          //定制样式
          pieces: [
            { min: 0, max: 0, label: 0, color: "#0883d8" },
            { min: 1, max: 10, label: '1-1000', color: "#0e549c" },
            { min: 10, max: 20, label: '1000-2000', color: "#61df50" },
            { min: 20, max: 30, label: '2000-3000', color: "#d58f86" },
            { min: 30, max: 100, label: '3000-4000', color: "#ffcd42" },
            { min: 100, label: ">10000", color: "#f57474" },
          ],
          textStyle: {
            color: "#fff"
          }
        },
      }
    };
  },
  mounted() {
    let mybox1 = echarts.init(this.$refs.box1);
    mybox1.setOption(this.mybox1);
    let mybox2 = echarts.init(this.$refs.box2);
    mybox2.setOption(this.mybox2);
    let mybox3 = echarts.init(this.$refs.box3);
    mybox3.setOption(this.mybox3);
    let mybox4 = echarts.init(this.$refs.box4);
    mybox4.setOption(this.mybox4);
    let mybox5 = echarts.init(this.$refs.box5);
    mybox5.setOption(this.mybox5);
    let mybox6 = echarts.init(this.$refs.box6);
    mybox6.setOption(this.mybox6);
    let mybox7 = echarts.init(this.$refs.box7);
    mybox7.setOption(this.mybox7);
  },
  methods: {
    gettime() {
      this.nowDate = new Date().toLocaleString();
    },
  },
  created() {
    this.nowtimer = setInterval(this.gettime, 1000);
  },
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}

//字体
@font-face {
  font-family: myFont;
  src: url(../../public/TTf/digital.TTF);
}

//动画
@keyframes rotatel {
  to {
    transform: rorare(0deg);
  }

  from {
    transform: rotate(360deg);
  }
}

@keyframes rotatelOut {
  from {
    transform: rorare(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.zi {
  font-family: myFont;
  color: #ffeb7b;
  font-size: 33px;
}

.box {
  width: 100%;
  height: 800px;
  background-image: url(../../public/img/bg.a6333996.jpg);
  background-size: 100% 100%;
  // background-repeat: no-repeat;
}

.header {
  width: 100%;
  height: 100px;
  background-image: url(../../public/img/head_bg.eeff3da5.png);
  background-size: 100% 100%;
  // background-repeat: no-repeat;
  display: flex;
  color: white;
  line-height: 80px;

  h1 {
    margin-left: 600px;
  }

  .time {
    margin-left: 300px;
  }
}

.body {
  width: 100%;
  height: 80%;
  // background: wheat;
  display: flex;

  .body-Left {
    width: 30%;
    height: 100%;

    // background: greenyellow;
    .body-one {
      width: 95%;
      height: 33%;
      // background: red;
      margin: 5px 2.5%;
      position: relative;
    }

  }

  .body-Center {
    width: 40%;
    height: 100%;
    position: relative;

    .btn1 {
      width: 120px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.1);
      border: 0;
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
      color: #fff;
      font-size: 16px;
      position: absolute;
      left: 115px;
      top: 140px;
    }

    .btn2 {
      width: 120px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.1);
      border: 0;
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
      color: #fff;
      font-size: 16px;
      position: absolute;
      right: 115px;
      top: 140px;
    }

    .body-Center-one {
      width: 100%;
      height: 80px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      text-align: center;
      line-height: 80px;
      position: relative;
      background: #0a1b5d;

      .box00 {
        position: absolute;
        left: 0;
        top: 0;
        width: 30px;
        height: 45px;
        border-top: 1px solid rgb(0, 132, 255);
        border-left: 1px solid rgb(0, 132, 255);
      }

      .box01 {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 30px;
        height: 45px;
        border-right: 1px solid rgb(0, 132, 255);
        border-bottom: 1px solid rgb(0, 132, 255);
      }
    }

    .body-Center-two {
      width: 100%;
      height: 30px;
      // border: 1px solid #f57474;
      color: rgb(192, 190, 190);
      text-align: center;
      line-height: 30px;
      background: #0a1b5d;
    }

    .body-Center-three {
      width: 100%;
      height: 500px;
      // border: 1px solid #444;
      position: relative;

      .mybox7 {
        position: absolute;
        z-index: 99;
        margin-top: 50px;
      }

      .img {
        display: block;
        width: 320px;
        height: 320px;
        position: absolute;
        left: 175px;
        top: 120px;
        // animation: rotate 0.1s infinite linear;
      }

      .img2 {
        display: block;
        width: 350px;
        height: 350px;
        position: absolute;
        left: 160px;
        top: 110px;
        animation: rotate 10s infinite linear;
      }

      @keyframes rotate {
        from {
          transform: rotate(360deg);
        }

        to {
          transform: rotate(0deg);
        }
      }

      .img1 {
        // display: block;
        width: 400px;
        height: 400px;
        position: absolute;
        left: 135px;
        top: 80px;
        animation: rotate1 10s infinite linear;
      }

      @keyframes rotate1 {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

    }
  }

  .body-Right {
    width: 30%;
    height: 100%;

    // background: yellow;
    .body-one {
      width: 95%;
      height: 33%;
      // background: red;
      margin: 5px 2.5%;
    }
  }
}

.dol {
  width: 10px;
  height: 10px;
}

.dol-1 {
  position: absolute;
  border-top: 1px solid #7ed3f4;
  border-left: 1px solid #7ed3f4;
}

.dol-2 {
  position: absolute;
  margin-left: 428px;
  border-top: 1px solid #7ed3f4;
  border-right: 1px solid #7ed3f4;
}

.dol-3 {
  position: absolute;
  margin-top: 180px;
  border-bottom: 1px solid #7ed3f4;
  border-left: 1px solid #7ed3f4;
}

.dol-4 {
  position: absolute;
  margin-top: 180px;
  margin-left: 428px;
  border-bottom: 1px solid #7ed3f4;
  border-right: 1px solid #7ed3f4;
}
</style>
